pre,
pre[class*='language-'] {
  background: var(--color-code-bg);
  border: 1px solid var(--color-hairline);
  border-radius: 3px;
  color: var(--color-text);
  overflow: auto;
  padding: 0.5em;
}

code {
  background: var(--color-code-bg);
  border: 1px solid var(--color-hairline);
  border-radius: 3px;
  padding: 0.125em 0.25em;
}

pre > code {
  background: initial;
  border: initial;
  border-radius: initial;
  padding: initial;
}

// Aggressively override the css loaded by prettify.js
// prettify.js is only used by the legacy API docs at /docs/native-client/
.prettyprint {
  background: var(--color-code-bg) !important;
  border: 1px solid var(--color-hairline) !important;
  border-radius: 3px !important;
  color: var(--color-primary-text) !important;
  overflow: auto !important;
  padding: 0.5em !important;
}

// Token colors
// These classes are generated by Prism
.token {
  &.comment,
  &.prolog,
  &.doctype,
  &.cdata {
    color: var(--color-code-comment);
  }

  &.punctuation,
  &.string,
  &.atrule,
  &.attr-value {
    color: var(--color-code-string);
  }

  &.property,
  &.tag {
    color: var(--color-code-tag);
  }

  &.boolean,
  &.number {
    color: var(--color-code-number);
  }

  &.selector,
  &.attr-name,
  &.attr-value .punctuation:first-child,
  &.keyword,
  &.regex,
  &.important,
  &.operator,
  &.entity,
  &.url,
  .language-css &.string {
    color: var(--color-code-attr);
  }

  &.entity {
    cursor: help;
  }

}

.namespace {
  opacity: 0.7;
}


.highlight-line-active,
.highlight-line-add,
.highlight-line-remove,
.highlight-line-active *,
.highlight-line-add *,
.highlight-line-remove * {
  // Force highlighted lines to remove all of their syntax highlighting
  // as it interferes with the highlight color.
  color: var(--color-text) !important;
}

.highlight-line-active {
  background-color: var(--color-code-highlight);
}

.highlight-line-add {
  background-color: var(--color-code-add);
  text-decoration: none;
}

.highlight-line-remove {
  background-color: var(--color-code-remove);
}
